<template>
  <div class="singer-detail">
    <div class="layout-top">
      <div class="left">
        <span
            class="icon-xiangzuojiantou iconfont"
            @click="goBack"
        />
        <span class="size">歌手详情</span>
      </div>
      <div class="right">
        <span class="iconfont icon-Androidgengduo_o"></span>
      </div>
    </div>
    <div class="cover-bg" :style="{'background':`url(${singerInfo.artist?.cover})`}">

    </div>
    <div class="singer-info">
      <div class="name">{{ singerInfo.artist?.name }}</div>
      <div class="ename">{{
          singerInfo.artist
              ?.alias[0]
        }}
      </div>
      <div class="fan"></div>
      <div class="tags">{{ singerInfo.identify?.imageDesc }}</div>
    </div>
    <div class="desc">
      {{ singerInfo.artist?.briefDesc }}
    </div>
  </div>
</template>


<script setup>
import {useRoute, useRouter} from "vue-router";

const route = useRoute();
const router = useRouter();
import {onMounted, ref} from "vue";
import api from "../../utils/api.js";
// 歌手信息
const singerInfo = ref({});
const goBack = () => {
  router.back();
}
onMounted(async () => {
  let result = await api.getDetailSinger(route.params.id);
  singerInfo.value = result.data;
})

</script>


<style scoped lang="scss">
.singer-detail {
  background: #f7f7f7;
  height: 100vh;
  padding: 0 15px 55px;
  overflow-y: scroll;

  .layout-top {
    padding: 10px 0;
  }

  .singer-info {
    background: #fff;
    text-align: center;
    border-radius: 10px;
    padding: 15px;

    .ename {
      color: #999;
      font-size: 12px;
      padding: 12px 0;
    }

    .tags {
      color: #999;
      font-size: 13px;
    }
  }

  .desc {
    //overflow: hidden;
    //text-overflow: ellipsis;
    //white-space: normal !important;
    //display: -webkit-box;
    //-webkit-line-clamp: 3; /* 显示4行，为auto时不隐藏 */
    //-webkit-box-orient: vertical;
    line-height: 22px;
    padding-top: 15px;
    font-size: 14px;
    color: #666;
  }
}
</style>
